<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>提交订单 - 点餐系统</title>
    <link rel="stylesheet" href="lib/element-ui.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div id="app">
        <!-- 顶部导航 -->
        <div class="header">
            <div class="header-back" @click="goBack">
                <i class="el-icon-arrow-left"></i>
            </div>
            <div class="header-title">提交订单</div>
        </div>

        <!-- 订单表单 -->
        <div class="order-container">
            <div class="order-form">
                <!-- 客户信息 -->
                <div class="form-section">
                    <div class="section-title">👤 你的信息</div>
                    <div class="form-group">
                        <input 
                            type="text" 
                            class="form-input" 
                            placeholder="请输入你的名字" 
                            v-model="order.customerName"
                            maxlength="10">
                    </div>
                </div>

                <!-- 订单详情 -->
                <div class="form-section">
                    <div class="section-title">🛒 订单内容</div>
                    <div class="order-items">
                        <div 
                            v-for="(item, index) in cartItems" 
                            :key="index"
                            class="order-item">
                            <span class="item-name">{{ item.name }}</span>
                            <span class="item-quantity">×{{ item.quantity }}</span>
                        </div>
                    </div>
                </div>

                <!-- 备注 -->
                <div class="form-section">
                    <div class="section-title">📝 备注</div>
                    <div class="form-group">
                        <textarea 
                            class="form-textarea" 
                            placeholder="有什么特殊要求吗？比如：少辣、不要葱..."
                            v-model="order.note"
                            maxlength="100"
                            rows="3"></textarea>
                        <div class="char-count">{{ order.note ? order.note.length : 0 }}/100</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部提交按钮 -->
        <div class="submit-footer">
            <button 
                class="submit-btn" 
                :class="{ 'disabled': !canSubmit }"
                :disabled="!canSubmit"
                @click="submitOrder">
                {{ submitting ? '提交中...' : '确认下单' }}
            </button>
        </div>
    </div>

    <script src="lib/vue.js"></script>
    <script src="lib/element-ui.js"></script>
    <script src="lib/axios.js"></script>
    <script src="js/api.js"></script>
    <script src="js/order.js"></script>
</body>
</html>